﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Account/Register.master" AutoEventWireup="true"
    CodeFile="RegisterVerifyPn.aspx.cs" Inherits="Account_RegisterVerifyPn" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <style type="text/css">
        #tipsLine
        {
            vertical-align: middle;
            background-color: #FFF5F5;
            padding: 5px 10px;
            border: 1px solid #F9E0BA;
        }
        
        #contentBox
        {
            vertical-align: middle;
            margin-top: 20px;
            background-color: #FFF5F5;
            padding: 5px 10px;
            border: 1px solid #F9E0BA;
            height: 250px;
        }
        #contentBox .seq
        {
            float: left;
            line-height: 35px;
            vertical-align: middle;
            text-align: center;
            width: 35px;
            font-size: 18pt;
            background-image: url(<%=PageHelper.Url("Images/Comm/Circle.gif") %>);
        }
        .Line
        {
            line-height: 35px;
            height: 35px;
            vertical-align: middle;
            margin-top: 20px;
        }
        .input_line
        {
            float: left;
            margin-left: 40px;
        }
        .input_label
        {
            float: left;
            width: 130px;
            text-align: right;
        }
        .input_label_font
        {
            font-size: 12pt;
            font-weight: bold;
            padding-right: 10px;
        }
        input[type="text"], input[type="password"]
        {
            width: 200px;
            height: 23px;
            font-size: 13pt;
            font-weight: bold;
            border: 1px solid #FAD6A0;
        }
        .orangeBtn
        {
            background-image: url(<%= PageHelper.Url("images/comm/orangebtn.gif") %>);
            width: 93px;
            height: 30px;
            line-height: 30px;
            font-size: 10pt;
            text-align: center;
            color: black;
            letter-spacing: 1px;
            font-weight: bold;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div style="border-bottom: 2px solid #97ccff; padding-bottom:10px; height: 64px; vertical-align: middle;">
        <div style="float: left; margin-left: 20px; margin-right: 20px;">
            <img src="../Images/register/150.gif" style="width: 50px; height: 64px; vertical-align: middle;" />
        </div>
        <label style="font-family: 微软雅黑; font-weight: bold; font-size: 23pt;">
            手机号码验证</label>
        <br />
        <label style="color: gray;">
            使用手机短信验证</label>
    </div>
    <div style="height: 320px; padding-top: 20px; background-color: #eaf5ff; border: 1px solid #97ccff;
        padding: 20px;">
        <div id="tipsLine">
            <img src="../Images/Comm/notice.gif" style="width: 26px; height: 26px; vertical-align: middle;" />
            &nbsp;&nbsp;&nbsp;&nbsp;手机号码可以让您参与更多的偷乐体验，挣到更多的Money。
        </div>
        <div id="contentBox">
            <div class="clear Line">
                <div class="seq">
                    <label style="font-size: 18pt; color: White;">
                        1</label></div>
                <div class="input_line">
                    <div class="input_label">
                        <label class="input_label_font" for="txtEmail">
                            验证码：</label>
                    </div>
                    <div style="float: left;">
                        <div style="float: left;">
                            <input id="txtVerifyCode" name="txtVerifyCode" maxlength="4" style="width: 60px;"
                                type="text" runat="server" />
                        </div>
                        <div style="float: left; margin-left: 10px;">
                            <img alt="验证码" title="点击切换图片" id="validImg" style="float: left; background-color: White;
                                vertical-align: middle;" src="" /><div style="float: left; margin-left: 10px; line-height: 30px;">
                                    验证码不区分大小写<br />
                                    <a href="javascript:return void;" onclick="reloadVerifyCode();">看不清，换一张</a>
                                </div>
                            <input type="hidden" id="vCodeTempCache" value="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear Line">
                <div class="seq">
                    <label style="font-size: 18pt; color: White;">
                        2</label></div>
                <div class="input_line">
                    <div class="input_label">
                        <label class="input_label_font" for="txtEmail">
                            您的手机号码：</label>
                    </div>
                    <div style="float: left;">
                        <input type="text" maxlength="11" runat="server" id="txtPhoneNumber" name="txtPhoneNumber" />
                    </div>
                    <div style="float: left; margin-left: 20px;">
                        <a id="btnSendCode" href="###">
                            <div class="orangeBtn">
                                发送验证码
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="clear Line">
                <div class="seq">
                    <label style="font-size: 18pt; color: White;">
                        3</label></div>
                <div class="input_line">
                    <div class="input_label">
                        <label class="input_label_font" for="txtEmail">
                            短信验证码：</label>
                    </div>
                    <div style="float: left;">
                        <input type="text" runat="server" id="txtCode" name="txtCode" />
                    </div>
                </div>
                <div style="float: left; margin-left: 20px;">
                    <a href="###" id="btnCheckCode">
                        <div class="orangeBtn">
                            提交验证码
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var imgChangeCount = 1;
        var verifyCodeBaseUrl = "<%= PageHelper.Url("/account/VerifyCode.aspx?") %>";

        function reloadVerifyCode() {
            imgChangeCount++;
            if (imgChangeCount > 10) {
                return;
            }
            var newImgPath = verifyCodeBaseUrl + parseInt(Math.random() * 10);
            $("#validImg").attr("src", newImgPath);
        }

        $().ready(function () {

            $("#validImg").click(function () {
                reloadVerifyCode();
            });

            reloadVerifyCode();

            $("#btnSendCode").data("flag", 0);
            $("#btnSendCode").click(function () {

                if ($("#btnSendCode").data("flag") == 1) {
                    $("#btnSendCode").data("flag", 0);
                    $("#MainContent_txtPhoneNumber").attr("disabled", "");
                    $("#btnSendCode div:first").html("发送验证码");
                    return;
                }

                var imageCode = $("#MainContent_txtVerifyCode").val().trim();
                if (imageCode.length != 4) {
                    alert("请输入正确的验证码！");
                    $("#MainContent_txtVerifyCode")[0].focus();
                    return false;
                }

                var phoneNumber = $("#MainContent_txtPhoneNumber").val();
                if (phoneNumber.length != 11) {
                    alert("请输入正确的手机号码！");
                    $("#MainContent_txtPhoneNumber")[0].focus();
                    return false;
                }
                else {
                    var reg = new RegExp("\\d{11}", "g");
                    if (!reg.test(phoneNumber)) {
                        alert("请输入正确的手机号码！");
                        $("#MainContent_txtPhoneNumber")[0].focus();
                        return false;
                    }

                    ASP.account_registerverifypn_aspx.SendPhoneVerifyCode(phoneNumber,imageCode, function (res) {
                        if (res != null && res.value != null && res.value.length != null) {
                            if (res.value == "MAXTIMES") {
                                alert("您发送短信的次数过于频繁，网站几天拒绝为您尝试！");
                                return;
                            }
                            else if (res.value=="ERRIMGCODE") {
                                $("#MainContent_txtVerifyCode").focus();
                                alert("您输入的验证码不正确！");
                                return;
                            }

                            $("#MainContent_txtPhoneNumber").attr("disabled", "disabled");
                            $("#btnSendCode").data("flag", 1);
                            $("#btnSendCode div:first").html("修改手机号码");
                            $("#MainContent_txtCode").focus();
                            alert("验证码已经发送到您的手机号码[" + $("#MainContent_txtPhoneNumber").val() + "]。");
                        }
                    });
                }
            });

            $("#btnCheckCode").click(function () {
                if (ASP.account_registerverifypn_aspx.IsCorrectPhoneVerifyCode($("#MainContent_txtCode").val()).value) {
                    alert("验证码正确!");
                }
                else {
                    alert("验证码错误。");
                }
            });
        });
    </script>
</asp:Content>
